<template>
  <el-col :span="span">
    <el-row>
      <el-col :span="span=='24'?5:10">
        <el-input
          v-model="file.name"
          size="small"
          style="width:100%;"
          placeholder="文件只能是 xls、xlsx格式"
          readonly
        />
      </el-col>

      <el-col :span="12" style="text-align:left;margin-left:15px;">
        <el-upload
          class="upload-demo"
          ref="upload"
          :http-request="handleChange"
          accept=".xls, .xlsx"
          :show-file-list="false"
        >
          <el-button slot="trigger" size="small" type="primary">选择文件</el-button>

          <el-button style="margin-left: 10px;" size="small" @click="submitUpload">导入</el-button>
          <a style="text-decoration: underline;" class="linkFont" :href="importHref" :download="importDownload">{{labelName}}</a>
        </el-upload>
      </el-col>
    </el-row>
  </el-col>
</template>
<script>
export default {
   props: {
    span:{type:Number,default:12},
    importHref:{type:String,default:''},
    importDownload:{type:String,default:''},
    importUrl:{type:String,default:''},
    labelName:{type:String,default:'模板下载'}
  },
  data(){
    return{
      file: {
        name: ""
      },
      fileParam: "",
    }
  },
  mounted(){

  },
  methods:{
    handleChange(param) {
      this.fileParam = param;
      this.file.name = param.file.name;
    },
    submitUpload() {
      console.log(this.file);
      if (!this.file.name) {
        this.$message({
          message: "请先选取文件!",
          type: "warning"
        });
        return;
      }
      var testmsg = this.file.name.substring(
        this.file.name.lastIndexOf(".") + 1
      );
      const extension = testmsg === "xls";
      const extension2 = testmsg === "xlsx";
      // const isLt2M = file.size / 1024 / 1024 < 10
      if (!extension && !extension2) {
        this.$message({
          message: "上传文件只能是 xls、xlsx格式!",
          type: "warning"
        });
        return;
      }
      this.uploadSectionFile();
    },
    //覆盖默认的上传，自定义上传方式
    uploadSectionFile() {
      let that = this;
      var url = this.importUrl; // API根据不同功能url不同，请配置到对应模块配置
      debugger;
      this.$requestImport(url, this.fileParam, function(response) {
        if (response.data.result == "1") {
          that.$alert("导入成功");
        } else {
          that.$alert("导入失败" , "提示");
          return;
        }
      });
    },
  },
};
</script>